<template>
	<view class="content">
		<view class="topbak" :style="{ height: sH +10+ 'px' }">

		</view>
		<view class="flex items-center tt_bag">
			<view class="tablist">
				<u-subsection :list="list" :current="curNow" inactiveColor="#666B75" bgColor="#F7F7F7"
					activeColor="#00091A" bold="false" @change="sectionChange"></u-subsection>
			</view>
			<image @click="$msg.Navigoto('/pages/index/search')" src="@/static/search.png"
				style="width: 40rpx;height: 40rpx;margin-left: 48rpx;"></image>
		</view>
		<view class="tt_bag items-center flex bag_list">
			<view :class="index==active?'acitem':'item'" v-for="(i,index) in tablist[curNow]" @click="tab(index)">
				{{i}}
			</view>
		</view>
		<view class="" style="min-height: 77vh;" v-if="info.length">
			<!-- 新订单  拖车/电池/开锁/服务-->
			<view class="infok" v-show="active==0&&(curNow==0||curNow==1||curNow==2||curNow==3)" @click="tz(index,i.id)"
				v-for="(i,index) in info">
				<view class="title flex justify-between">
					<view class="t_o items-center flex">
						<span class="flex-center ji" v-if="i.service_j==1">急</span> <span>￥{{i.actual_price}}</span>
					</view>
					<view class="t_w flex" v-show="curNow==2||curNow==1">
						<view class="" style="font-size: 28rpx;color: #333A47;">
							{{i.expected_arrival}}
						</view>
						<view class="" style="font-size: 28rpx;color: #999CA3;margin-left: 8rpx;">
							前送达
						</view>
					</view>
					<view class="" style="font-size: 28rpx;color: #999CA3;" v-show="curNow==0||curNow==3">
						约<span style="font-weight: bold;font-size: 28rpx;color: #333A47;">{{i.km}}</span>km
					</view>
			
				</view>
				<view class="qu flex items-center">
					<view class="q_o_o  flex-center">
						{{curNow==2?'取':curNow==3?'锁':curNow==1?'服':'车'}}
					</view>
					<view class="q_w    ">
						{{i.store_name}}
					</view>
				</view>
				<view class="info flex items-start">
					<view class="o" v-show="curNow==0||curNow==2">
						{{i.trailer_km}}km
					</view>
					<view class="h" v-show="curNow==2">
						{{i.trailer_address}}
					</view>
			
				</view>
				<view class="qu flex items-center">
					<view class="q_o_t  flex-center">
						{{curNow==2?'收':'目'}}
					</view>
					<view class="q_w    ">
						{{i.user_location}}
					</view>
				</view>
				<view class="info flex items-start">
					<view class="o">
						{{i.user_km}}km
					</view>
					<view class="t">
						{{i.consignee}}
					</view>
					<view class="h">
						{{i.mobile}}
					</view>
					<view class="f flex-center" v-show="i.is_door==1">
						上门安装
					</view>
				</view>
				<view class="butgp flex">
					<view class="t_jd flex-center">
						接单
					</view>
				</view>
			</view>
			<!-- 待取货-进行中- 拖车/开锁/服务-->
			<view class="infok" v-show="active==1&&(curNow==0||curNow==1||curNow==3)" v-for="(i,index) in info"
				@click="tz(index,i.id)" >
				<!-- 拖车 /服务-->
				<view class="title flex justify-between" v-show="curNow==0||curNow==3||curNow==1">
					
					<view class="t_o items-center flex">
						<span class="flex-center ji" v-if="i.service_j==1">急</span> <span>￥{{i.actual_price}}</span>
					</view>
					<!-- //服务 -->
					<view class=""  style="color: #3377FF;font-size: 28rpx;font-weight: bold;" v-show="i.rider_status==2&&curNow==1">
						服务中
					</view>
					<view class="flex" style="color: #333A47;font-size: 28rpx; font-weight: bold;" v-if="i.overtime!='0'&&curNow==1">
						已超时<span style="color: #FF6401;font-size: 28rpx;">{{i.overtime}}分钟</span>，请尽快配送
					</view>
					<view class="" v-else>
						<view class="t_w flex items-end" v-show="i.rider_status==1&&curNow==1">
							<view class="" style="font-size: 28rpx;color: #333A47;margin:0 8rpx;">
								{{i.expected_arrival}}
							</view>
							<view class="" style="font-size: 28rpx;color: #999CA3;">
								前送达
							</view>
						</view>
					</view>
					<!-- //开锁 -->
					<view class=""  style="color: #3377FF;font-size: 28rpx;font-weight: bold;" v-show="i.rider_status==3&&curNow==3">
						服务中
					</view>
					<view class="" style="font-size: 28rpx;color: #999CA3;"  v-show="i.rider_status==1&&curNow==3"
						@click.stop="the_destination(i.rider_status,i.id)" >
						预计 <span	style="color: #3377FF;font-size: 28rpx;font-weight: bold;">{{i.expected_arrival}}</span>
						到达目的地
					</view>
					<view class="" style="font-size: 28rpx;color: #999CA3;"  v-show="i.rider_status==1&&curNow==0"
						@click.stop="the_destination(i.rider_status,i.id)" >
						预计 <span	style="color: #3377FF;font-size: 28rpx;font-weight: bold;">{{i.expected_arrival}}</span>
						到达车辆位置
					</view>
					<view class="" style="font-size: 28rpx;color: #999CA3;"  v-show="i.rider_status==2&&curNow==0"
						@click.stop="the_destination(i.rider_status,i.id)" >
						预计 <span	style="color: #3377FF;font-size: 28rpx;font-weight: bold;">{{i.expected_arrival}}</span>
						到达目的地
					</view>
					<!-- 后期对接 -->
					<!-- <view class="" style="font-size: 28rpx;color: #999CA3;" v-show="curNow==0"
						@click.stop="the_destination(i.rider_status,i.id)" >
						预计 <span	style="color: #3377FF;font-size: 28rpx;font-weight: bold;">{{i.expected_arrival}}</span>
						到达目的地
					</view> -->
				</view>
				<view class="qu flex items-center">
					<view class="  flex-center" :class="i.blue" v-show="curNow==1||curNow==2">
						{{curNow==2?'取':curNow==3?'锁':curNow==1?'服':''}}
					</view>
					<view class="flex-center" :class="i.blue" v-show="curNow==3">
						{{curNow==2?'取':curNow==3?'锁':''}}
					</view>	
					<!-- 拖车 -->
					<view :class="i.white" class="flex-center" v-show="curNow==0">
						车
					</view>
			
					<view class="q_w    ">
						{{i.user_location}}
					</view>
				</view>
				<view class="info flex items-start" v-show="curNow==0||curNow==2">
					<view class="o">
						{{i.km}}km
					</view>
					<view class="h" v-show="curNow!=0">
						贵阳市南明区青山路青山领域东侧
					</view>
				</view>
				<view class="qu flex items-center">
					<view class="q_o_d flex-center" v-show="curNow==2">
						{{curNow==2?'收':'目'}}
					</view>
					<view class="q_o_o flex-center" v-show="curNow==3||curNow==1">
						{{curNow==2?'收':'目'}}
					</view>
					<!-- 拖车 已经到达车辆位置-->
					<view :class="i.white" class="flex-center" v-show="curNow==0">
						目
					</view>
					<view class="q_w">
						{{i.trailer_address}}
					</view>
				</view>
				<view class="info flex items-start">
					<view class="o">
						{{i.user_km}}km
					</view>
					<view class="t">
						{{i.consignee}}
					</view>
					<view class="h">
						{{i.mobile}}
					</view>
					<view class="f flex-center" v-show="curNow==2">
						上门安装
					</view>
				</view>
				<view class="butgp flex">
					<view class="o flex-center" @click.stop="bdph(i.mobile)">
						<image src="@/static/phone.png" mode="widthFix" style="width: 32rpx;margin-right: 8rpx;"></image>
						<view class="">
							客户
						</view>
					</view>
					<view class="" v-show="curNow==3||curNow==1">
						<view class="t flex-center">
							{{i.rider_status==1?'已到达目的地':'服务完成'}}
						</view>
					</view>
					<!-- <view class="" v-show="curNow==0">
						<view class="t flex-center"  @click.stop="the_destination(i.rider_status,i.id)">
							{{i.rider_status==1?'到达车辆位置':'到达目的地'}}
						</view>
					</view> -->
					<view class="" v-show="curNow==0">
						<view class="t flex-center">
							{{i.rider_status==1?'到达车辆位置':'到达目的地'}}
						</view>
					</view>
					<!-- <view class="" v-else>
						<view class="t flex-center">
							服务完成1
						</view>
					</view> -->
				</view>
			</view>
			<!-- 配送中 -->
			<view class="infok" v-show="active==2&&curNow==2" v-for="(i,index) in info"
				@click="$msg.Navigoto('/pages/Alldetail_d/Alldetail_d?curNow='+curNow+'&active='+active+'&id='+i.id)">
				<view class="title flex justify-between">
					<view class="t_o">
						￥{{i.actual_price}}
					</view>
					<view class="flex" style="color: #333A47;font-size: 28rpx; font-weight: bold;" v-if="i.overtime!='0'">
						已超时<span style="color: #FF6401;font-size: 28rpx;">{{i.overtime}}分钟</span>，请尽快配送
					</view>
					<view class="t_w flex" v-else>
						<view class="" style="font-size: 28rpx;color: #333A47;margin:0 8rpx;">
							{{i.expected_arrival}}
						</view>
						<view class="" style="font-size: 28rpx;color: #999CA3;">
							前送达
						</view>
					</view>
					
				</view>
				<view class="qu flex items-center">
					<view class="q_o  flex-center">
						取
					</view>
					<view class="q_w    ">
						{{i.trailer_address}}
					</view>
				</view>
				<view class="qu flex items-center">
					<view class="q_o_t  flex-center">
						收
					</view>
					<view class="q_w    ">
						{{i.user_location}}
					</view>
				</view>
				<view class="info flex items-start">
					<view class="o">
						{{i.user_km}}km
					</view>
					<view class="t">
						{{i.consignee}}
					</view>
					<view class="h">
						{{i.mobile}}
					</view>
					<view class="f flex-center" v-show="i.is_door==1">
						上门安装
					</view>
				</view>
				<view class="butgp flex">
					<view class="o flex-center" @click.stop="bdph(i.mobile)">
						<image src="@/static/phone.png" mode="widthFix" style="width: 32rpx;margin-right: 8rpx;"></image>
						<view class="">
							客户
						</view>
					</view>
					<view class="t flex-center">
						确认送达
					</view>
				</view>
			</view>
			<!-- 服务中 -->
			<view class="infok" v-show="active==3"
				@click="$msg.Navigoto('/pages/Alldetail_d/Alldetail_d?curNow='+curNow+'&active='+active+'&id='+i.id)"
				v-for="(i,index) in info">
				<view class="title flex justify-between">
					<view class="t_o">
						￥{{i.actual_price}}
					</view>
					<view class="t_w">
						服务中
					</view>
				</view>
				<view class="qu flex items-center">
					<view class="q_o  flex-center">
						取
					</view>
					<view class="q_w    ">
						{{i.trailer_address}}
					</view>
				</view>
				<view class="qu flex items-center">
					<view class="q_o_t  flex-center">
						收
					</view>
					<view class="q_w    ">
						{{i.user_location}}
					</view>
				</view>
				<view class="info flex items-start">
					<view class="o">
						{{i.user_km}}km
					</view>
					<view class="t">
						{{i.consignee}}
					</view>
					<view class="h">
						{{i.mobile}}
					</view>
					<view class="f flex-center" v-show="i.is_door==1">
						上门安装
					</view>
				</view>
				<view class="butgp flex">
					<view class="o flex-center" @click.stop="bdph(i.mobile)">
						<image src="@/static/phone.png" mode="widthFix" style="width: 32rpx;margin-right: 8rpx;"></image>
						<view class="">
							客户
						</view>
					</view>
					<view class="t flex-center">
						服务完成
					</view>
				</view>
			</view>
			<!-- 已完成 -->
			<view class="infok" v-for="(i,index) in info" v-show="active==4"
				@click="dcywc(i)">
				<view class="title flex justify-between">
					<view class="" style="font-weight: bold;font-size: 28rpx;color: #3377FF;">
						已完成
					</view>
					<view class="" style="font-size: 28rpx;color: #CCCED1;">
						{{i.service_completion_time||''}}
					</view>
				</view>
				<view class="qu flex items-center">
					<view class="q_o  flex-center">
						{{curNow==2?'取':'车'}}
					</view>
					<view class="q_w    ">
						{{i.trailer_address}}
					</view>
				</view>
				<view class="qu flex items-center">
					<view class="q_o_w flex-center">
						{{curNow==2?'收':'目'}}
					</view>
					<view class="q_w    ">
						{{i.user_location}}
					</view>
				</view>
				<view class="info flex items-start">
					<view class="o" style="opacity: 0;">
						1.3km
					</view>
					<view class="t">
						{{i.consignee}}
					</view>
					<view class="h">
						{{i.mobile}}
					</view>
					<view class="f flex-center" v-show="curNow==2">
						上门安装
					</view>
				</view>
				<view class="" style="color: #666B75;font-size: 28rpx; text-align: right;margin-top: 24rpx;">
					<view class="" v-show="i.rider_status==4">
						佣金<span style="color: #FF6401;font-weight: bold;">￥{{i.actual_price}}</span>
					</view>
					<view class="" style="font-weight: bold;font-size: 28rpx;color: #FF6401;" v-show="i.rider_status==5">
						用户取消订单
					</view>
					<view class="" style="font-weight: bold;font-size: 28rpx;color: #FF6401;" v-show="i.rider_status==6">
						用户取消订单，订单申诉中
					</view>
					<view class="" style="font-weight: bold;font-size: 28rpx;color: #FF6401;" v-show="i.rider_status==7">
						申诉成功
					</view>
					<view class="" style="font-weight: bold;font-size: 28rpx;color: #FF6401;" v-show="i.rider_status==8">
						申诉失败
					</view>
				</view>
				<view class="butgp flex justify-end">
					<view class="t_w flex-center"  @click.stop="delete_order(i.id)">
						删除订单
					</view>
					<view class="flex-center t_w_h" v-show="i.rider_status==5" @click.stop="qss(i)">
						去申诉
					</view>
					<view class="flex-center t_w_h" v-show="i.rider_status==6" @click.stop="ssxq(i)">
						申诉详情
					</view>
				</view>
			</view>
			<!-- 拖车-服务-开锁  已完成 -->
			<view class="infok" v-show="active==2&&(curNow==0||curNow==1||curNow==3)" v-for="(i,index) in info"
				@click.stop="fwtz(i,curNow,i.id)">
				<view class="title flex justify-between">
					<view class="" style="font-weight: bold;font-size: 28rpx;color: #3377FF;">
						已完成
					</view>
					<view class="" style="font-size: 28rpx;color: #CCCED1;">
						{{i.service_completion_time||''}}
					</view>
				</view>
				<view class="qu flex items-center">
					<view class="q_o  flex-center">
						{{curNow==2?'取':curNow==3?'锁':curNow==1?'服':'车'}}
					</view>
					<view class="q_w    ">
						{{i.trailer_address}}
					</view>
				</view>
				<view class="qu flex items-center">
					<view class="q_o_w flex-center">
						{{curNow==2?'收':'目'}}
					</view>
					<view class="q_w    ">
						{{i.user_location}}
					</view>
				</view>
				<view class="info flex items-start">
					<view class="o" style="opacity: 0;">
						xxxkm
					</view>
					<view class="t">
						{{i.consignee}}
					</view>
					<view class="h">
						{{i.mobile}}
					</view>
					<view class="f flex-center" v-show="curNow==2">
						上门安装
					</view>
				</view>
				<view class="" style="color: #666B75;font-size: 28rpx; text-align: right;margin-top: 24rpx;">
					<view class="" v-show="i.rider_status==4">
						佣金<span style="color: #FF6401;font-weight: bold;">￥{{i.actual_price}}</span>
					</view>
					<view class="" style="font-weight: bold;font-size: 28rpx;color: #FF6401;" v-show="i.rider_status==5">
						用户取消订单
					</view>
					<view class="" style="font-weight: bold;font-size: 28rpx;color: #FF6401;" v-show="i.rider_status==6">
						用户取消订单，订单申诉中
					</view>
					<view class="" style="font-weight: bold;font-size: 28rpx;color: #FF6401;" v-show="i.rider_status==7">
						申诉成功
					</view>
				</view>
				<view class="butgp flex justify-end">
					<view class="t_w flex-center" @click.stop="delete_order(i.id)">
						删除订单
					</view>
					<view class="flex-center t_w_h" v-show="i.rider_status==5" @click.stop="qss(i)">
						去申诉
					</view>
					<view class="flex-center t_w_h" v-show="i.rider_status==6" @click.stop="ssxq(i)">
						申诉详情
					</view>
				</view>
			</view>
			<!-- 电池-待取货 -->
			<view class="infok" v-show="active==1&&curNow==2" @click="dtz(i.id)" v-for="i in info">
				<!-- 电池 -->
				<view class="title flex justify-between" v-show="curNow==2">
					<view class="t_w flex items-end">
						<view class="" style="font-weight: bold;font-size: 36rpx;color: #00091A;">
							#{{i.pickup_note_number}}
						</view>
						<view class="" style="font-size: 28rpx;color: #333A47;margin:0 8rpx;">
							{{i.expected_arrival}}
						</view>
						<view class="" style="font-size: 28rpx;color: #999CA3;">
							前送达
						</view>
					</view>
					<view class="t_o">
						￥{{i.actual_price}}
					</view>
				</view>
				<!-- 拖车 /服务-->
				<view class="title flex justify-between" v-show="curNow==0||curNow==3||curNow==1">
					<view class="t_o items-center flex">
						<span class="flex-center ji" v-if="curNow==1">急</span> <span>￥5.90</span>
					</view>
					<view class="" style="font-size: 28rpx;color: #999CA3;" v-show="curNow==0||curNow==3">
						预计 <span style="color: #3377FF;font-size: 28rpx;font-weight: bold;">14:10</span>
						{{curNow==0?'到达车辆位置':'到达目的地'}}
					</view>
					<view class="t_w flex items-end" v-show="curNow==1">
						<view class="" style="font-size: 28rpx;color: #333A47;margin:0 8rpx;">
							{{i.expected_arrival}}
						</view>
						<view class="" style="font-size: 28rpx;color: #999CA3;">
							前送达
						</view>
					</view>
				</view>
				<view class="qu flex items-center">
					<view class="  flex-center" :class="i.blue" v-show="curNow==1||curNow==2">
						{{curNow==2?'取':curNow==3?'锁':curNow==1?'服':''}}
					</view>
					<view class="q_o_d  flex-center" v-show="curNow==3">
						{{curNow==2?'取':curNow==3?'锁':''}}
					</view>
					<!-- 拖车 -->
					<view :class="i.white" class="flex-center" v-show="curNow==0">
						车
					</view>
			
					<view class="q_w    ">
						{{i.store_name}}
					</view>
				</view>
				<view class="info flex items-start" v-show="curNow==0||curNow==2">
					<view class="o">
						{{i.trailer_km}}km
					</view>
					<view class="h" v-show="curNow!=0">
						{{i.trailer_address}}
					</view>
				</view>
				<view class="qu flex items-center">
					<view class="q_o_d flex-center" v-show="curNow==2">
						{{curNow==2?'收':'目'}}
					</view>
					<view class="q_o_o flex-center" v-show="curNow==3||curNow==1">
						{{curNow==2?'收':'目'}}
					</view>
					<!-- 拖车 已经到达车辆位置-->
					<view :class="i.white" class="flex-center" v-show="curNow==0">
						目
					</view>
					<view class="q_w    ">
						{{i.user_location}}
					</view>
				</view>
				<view class="info flex items-start">
					<view class="o">
						{{i.user_km}}km
					</view>
					<view class="t">
						{{i.consignee}}
					</view>
					<view class="h">
						{{i.mobile}}
					</view>
					<view class="f flex-center" v-show="i.is_door==1">
						上门安装
					</view>
				</view>
				<view class="butgp flex">
					<view class="o flex-center" @click.stop="bdph( i.mobile)">
						<image src="@/static/phone.png" mode="widthFix" style="width: 32rpx;margin-right: 8rpx;"></image>
						<view class="">
							取货
						</view>
					</view>
					<view class="">
						<view class="t flex-center">
							确认取货
						</view>
					</view>
			
				</view>
			</view>
			
		</view>
		<view class=""  style="height: 1100rpx;" v-if="!info.length">
			<image :src="img" mode="widthFix" style="width: 600rpx;"></image>
		</view>
		<image src="@/static/logo.png" mode="widthFix"
			style="width:430px;margin: 28px 0;height:22.9333px;position:absolute;bottom:0;">
	</view>
</template>

<script>
	import config from '@/config';
	export default {
		data() {
			return {
				img: '',
				info: '',
				type: 1,
				active: 0,
				sH: '',
				list: ['拖车', '服务', '电池', '开锁'],
				curNow: 0,
				page: 1,
				pagesize: 5,
				lat: '',
				lng: '',
				tablist: [
					['新订单', '进行中', '已完成'],
					['新订单', '进行中', '已完成'],
					['新订单', '待取货', '配送中', '服务中', '已完成'],
					['新订单', '进行中', '已完成'],
				]
			}
		},
		onLoad() {
			this.getWinTop().then(res => {
				this.sH = res.statusBar;
			});
			this.img = config.http.IMGSERVER + '/' + 'data_empty.png'
			console.log(this.img);
		},
		onShow() {
			this.reslo()
		},
		onPullDownRefresh() {
			console.log('aaa');
			this.page = 1
			this.reslo()
		},
		onReachBottom() {
			this.page++
			this.$api.rider_order_list({
				product_type: this.curNow,
				status: this.active,
				page: this.page,
				pagesize: this.pagesize,
				lat: this.lat,
				lng: this.lng
			}).then(res => {
				this.info = this.info.concat(res.data)
				console.log(this.info, 'this.info')
			})
		},
		methods: {

			ssxq(i) {
				console.log('aa', this.curNow);
				if (this.curNow == 0) {
					console.log('1');
					this.$msg.Navigoto('/pages/Alldetail_t/complete_course?id=' + JSON.stringify(i))
				} else if (this.curNow == 3) {
					console.log('2');
					this.$msg.Navigoto('/pages/Alldetail_k/complete_course?id=' + JSON.stringify(i))
				} else if (this.curNow == 2) {
					console.log('2');
					this.$msg.Navigoto('/pages/Alldetail_d/complete_course?id=' + JSON.stringify(i))
				} else {
					this.$msg.Navigoto('/pages/Alldetail_f/complete_course?id=' + JSON.stringify(i))
				}
			},
			qss(i) {
				if (this.curNow == 0) {
					this.$msg.Navigoto('/pages/Alldetail_t/appeal?&id=' + JSON.stringify(i))
				} else if (this.curNow == 3) {
					this.$msg.Navigoto('/pages/Alldetail_k/appeal?id=' + JSON.stringify(i))
				} else if (this.curNow == 2) {
					this.$msg.Navigoto('/pages/Alldetail_d/appeal?id=' + JSON.stringify(i))
				} else {
					this.$msg.Navigoto('/pages/Alldetail_f/appeal?id=' + JSON.stringify(i))
				}

			},
			delete_order(order_id) {
				this.page = 1
				if (this.curNow == 0) {
					this.$api.delete_order({
						order_id
					}).then(res => {
						this.rider_order_list()
						// uni.navigateBack()
					})
				} else if (this.curNow == 3) {
					this.$api.unlocking_delete_order({
						order_id
					}).then(res => {
						this.rider_order_list()
						// uni.navigateBack()
					})
				} else if (this.curNow == 2) {
					this.$api.replace_battery_and_delete({
						order_id
					}).then(res => {
						this.rider_order_list()
						// uni.navigateBack()
					})
				} else {
					this.$api.service_delete_order({
						order_id
					}).then(res => {
						this.rider_order_list()
						// uni.navigateBack()
					})
				}

			},
			the_destination(status, order_id) {
				if (status == 1) {
					this.$api.the_destination({
						order_id
					}).then(res => {
						this.rider_order_list()
						// uni.navigateBack()
					})
				} else {
					this.$api.arrived_at_destination({
						order_id
					}).then(res => {
						this.active = 2
						this.rider_order_list()
					})
				}

			},
			taking_orders(order_id) {
				this.$api.taking_orders({
					order_id
				}).then(res => {
					this.active = 1
					this.rider_order_list()
				})
			},
			reslo() {
				let app = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						app.lat = res.latitude
						app.lng = res.longitude
						console.log('当前位置的纬度：' + res.latitude);
						app.rider_order_list()
					},
					fail(err) {
						console.log(err, 'err');
					}
				});
			},
			rider_order_list() {
				this.$api.rider_order_list({
					product_type: this.curNow,
					status: this.active,
					page: this.page,
					pagesize: this.pagesize,
					lat: this.lat,
					lng: this.lng
				}).then(res => {
					this.info = res.data
					uni.stopPullDownRefresh()
					console.log(this.info, 'this.info')
				})
			},
			tz(index, id) {
				// curNow:0是拖车/1是服务/2是电池/3是开锁
				if (this.curNow == 0) {
					this.$msg.Navigoto('/pages/Alldetail_t/Alldetail_t?curNow=' + this.curNow + '&active=' + this.active +
						'&id=' + id)
				} else if (this.curNow == 1) {
					this.$msg.Navigoto('/pages/Alldetail_f/Alldetail_f?curNow=' + this.curNow + '&active=' + this.active +
						'&id=' + id)
				} else if (this.curNow == 3) {
					this.$msg.Navigoto('/pages/Alldetail_k/Alldetail_k?curNow=' + this.curNow + '&active=' + this.active +
						'&id=' + id)
				} else {
					this.$msg.Navigoto('/pages/Alldetail_d/Alldetail_d?curNow=' + this.curNow + '&active=' + this.active +
						'&id=' + id)
				}
			},
			dtz(id) {
				this.$msg.Navigoto('/pages/Alldetail_d/Alldetail_d?curNow=' + this.curNow + '&active=' + this.active +
					'&id=' + id)
			},
			fwtz(i, curNow, id) {
				if (this.curNow == 1) {
					if (i.rider_status == 6) return
					this.$msg.Navigoto('/pages/Alldetail_f/complete?curNow=' + this.curNow + '&active=' + this.active +
						'&id=' + id)
				} else if (this.curNow == 3) {
					if (i.rider_status == 6) return
					this.$msg.Navigoto('/pages/Alldetail_k/complete?curNow=' + this.curNow + '&active=' + this.active +
						'&id=' + id)
				} else {
					if (i.rider_status == 6) return
					this.$msg.Navigoto('/pages/Alldetail_t/complete?curNow=' + this.curNow + '&active=' + this.active +
						'&id=' + id)
				}
			},
			dcywc(i) {
				if (i.rider_status == 6) return
				this.$msg.Navigoto('/pages/Alldetail_d/complete?curNow=' + this.curNow + '&active=' + this.active +
					'&id=' + i.id)
			},
			bdph(ph) {
				uni.makePhoneCall({
					phoneNumber: ph
				});

			},
			tab(index) {
				console.log(index);
				this.active = index
				this.page = 1
				this.rider_order_list()
			},
			sectionChange(index) {
				this.active = 0
				this.page = 1
				this.curNow = index;
				this.rider_order_list()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 115rpx;
		position: relative;

		.tablist {
			width: 368rpx;
		}
	}

	.tt_bag {
		margin-left: 18px;
		width: 100%;

		.item {
			font-size: 28rpx;
			color: #999CA3;
			margin-left: 32rpx;
		}

		.acitem {
			font-size: 32rpx;
			color: #3377FF;
			font-weight: bold;
			margin-left: 32rpx;
		}
	}

	.bag_list {
		margin-top: 45rpx;
	}

	.infok {
		padding: 24rpx;
		margin-top: 45rpx;
		width: 686rpx;
		// height: 436rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.title {
			.t_o {
				font-weight: bold;
				font-size: 36rpx;
				color: #FF6401;

				.ji {
					color: #FFFFFF;
					font-size: 24rpx;
					width: 40rpx;
					height: 40rpx;
					background: #FF6401;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}

			.t_w {
				font-weight: bold;
				font-size: 28rpx;
				color: #3377FF;
			}
		}

		.qu {
			margin-top: 30rpx;
			padding-left: 10rpx;

			.q_o {
				width: 40rpx;
				height: 40rpx;
				background: #F7FAFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 20rpx;
				color: #3377FF;
			}

			.q_o_o {
				width: 40rpx;
				height: 40rpx;
				background: #3377FF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 20rpx;
				color: #FFFFFF;
			}

			.q_o_b {
				width: 40rpx;
				height: 40rpx;
				background: #F7FAFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 20rpx;
				color: #3377FF;
			}

			.q_o_w {
				width: 40rpx;
				height: 40rpx;
				background: #F7FAFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 20rpx;
				color: #3377FF;
			}

			.q_w {
				padding-left: 42rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #00091A;
				width: 558rpx;
			}

			.q_o_t {
				width: 40rpx;
				height: 40rpx;
				background: #3377FF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 20rpx;
				color: #FFFFFF;
			}

			.q_o_d {
				width: 40rpx;
				height: 40rpx;
				background: #F7FAFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 20rpx;
				color: #3377FF;
			}
		}

		.info {
			margin-top: 15rpx;

			.o {
				font-size: 20rpx;
				color: #999CA3;
			}

			.t {
				font-weight: bold;
				margin-left: 35rpx;
				font-size: 28rpx;
				color: #333A47;
				margin-top: 5rpx;
			}

			.h {
				margin-left: 35rpx;
				font-size: 28rpx;
				color: #999CA3;
				margin-top: 5rpx;
			}

			.f {
				margin-left: 24rpx;
				width: 112rpx;
				height: 48rpx;
				background: #3377FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.butgp {
			margin-top: 30rpx;

			.t_w {
				width: 160rpx;
				height: 68rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #CCCED1;
				font-size: 28rpx;
				color: #666B75;
			}

			.t_w_h {
				width: 160rpx;
				height: 68rpx;
				background: #3377FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				color: #ffffff;
				margin-left: 24rpx;
			}

			.o {
				width: 230rpx;
				height: 100rpx;
				background: #F7F7F7;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 32rpx;
				color: #333A47;
			}

			.t {
				margin-left: 24rpx;
				width: 384rpx;
				height: 100rpx;
				background: #3377FF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.t_jd {
				width: 638rpx;
				height: 100rpx;
				background: #3377FF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				color: #FFFFFF;
			}
		}
	}
</style>